<script setup lang='ts'>
import * as THREE from 'three'

let requestAnimationId = 0
let renderer:any, scene:any, camera:any, circle:any, skelet:any, particle:any

onMounted(() => {
  init()
  animate()
})

function init() {
  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
  renderer.setPixelRatio((window.devicePixelRatio) ? window.devicePixelRatio : 1)
  renderer.setSize(window.innerWidth, window.innerHeight)
  renderer.autoClear = false
  renderer.setClearColor(0x000000, 0.0)
  document.getElementById('webgl')?.appendChild(renderer.domElement)

  scene = new THREE.Scene()

  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000)
  camera.position.z = 400
  scene.add(camera)

  circle = new THREE.Object3D()
  skelet = new THREE.Object3D()
  particle = new THREE.Object3D()

  scene.add(circle)
  scene.add(skelet)
  scene.add(particle)

  const geometry = new THREE.TetrahedronGeometry(2, 0)
  const geom = new THREE.IcosahedronGeometry(7, 1)
  const geom2 = new THREE.IcosahedronGeometry(15, 1)

  const material = new THREE.MeshPhongMaterial({
    color: 0xFFFFFF,
    flatShading: true,
  })

  for (let i = 0; i < 1000; i++) {
    const mesh = new THREE.Mesh(geometry, material)
    mesh.position.set(Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5).normalize()
    mesh.position.multiplyScalar(90 + (Math.random() * 700))
    mesh.rotation.set(Math.random() * 2, Math.random() * 2, Math.random() * 2)
    particle.add(mesh)
  }

  const mat = new THREE.MeshPhongMaterial({
    color: 0xFFFFFF,
    flatShading: true,
  })

  const mat2 = new THREE.MeshPhongMaterial({
    color: 0xFFFFFF,
    wireframe: true,
    side: THREE.DoubleSide,

  })

  const planet = new THREE.Mesh(geom, mat)
  planet.scale.x = planet.scale.y = planet.scale.z = 16
  circle.add(planet)

  const planet2 = new THREE.Mesh(geom2, mat2)
  planet2.scale.x = planet2.scale.y = planet2.scale.z = 10
  skelet.add(planet2)

  const ambientLight = new THREE.AmbientLight(0x999999)
  scene.add(ambientLight)

  const lights = []
  lights[0] = new THREE.DirectionalLight(0xFFFFFF, 1)
  lights[0].position.set(1, 0, 0)
  lights[1] = new THREE.DirectionalLight(0x11E8BB, 1)
  lights[1].position.set(0.75, 1, 0.5)
  lights[2] = new THREE.DirectionalLight(0x8200C9, 1)
  lights[2].position.set(-0.75, -1, 0.5)
  scene.add(lights[0])
  scene.add(lights[1])
  scene.add(lights[2])

  window.addEventListener('resize', onWindowResize, false)
};

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
}

function animate() {
  cancelAnimationFrame(requestAnimationId)
  requestAnimationId = requestAnimationFrame(animate)

  particle.rotation.x += 0.0000
  particle.rotation.y -= 0.0040
  circle.rotation.x -= 0.0020
  circle.rotation.y -= 0.0030
  skelet.rotation.x -= 0.0010
  skelet.rotation.y += 0.0020
  renderer.clear()

  renderer.render(scene, camera)
};
</script>

<template>
  <div id="webgl" wh-full bg-black />
</template>

<style scoped lang='scss'>

</style>
